<template>
  <div class="module">
   module模块开发
   <div>getters: {{ $store.getters['home/homedubleCount']}}</div>
   <div>state: {{ $store.state.home.homeCount }}</div>
   <button @click="mutations">+10</button>
   <button @click="increment">-10</button>
   <button @click="add2(20)">+20</button>
    <button @click="incrementhome(30)">+30</button>
   <button @click="incre2(20)">-20</button>
    <button @click="incrementAction(30)">-30</button>
    <div>{{ getters1 }}</div>
    <div>{{ state1 }}</div>
  </div>
  <AppnextTick/>
  <hr>
  <create-namespace-helper-vue></create-namespace-helper-vue>
</template>
<script>
import { computed } from 'vue'
import { mapMutations, mapActions, useStore } from 'vuex'
import AppnextTick from './App_nextTick'
import createNamespaceHelperVue from './createNamespaceHelper.vue'
export default {
  components: {
    AppnextTick,
    createNamespaceHelperVue
  },
  methods: {
    mutations () {
      this.$store.commit('home/incrementhome', 10)
    },
    increment () {
      this.$store.dispatch('home/incrementAction', 10)
    }
  },
  setup () {
    const mutations = mapMutations({
      add2: 'home/incrementhome'
    })
    const mutations1 = mapMutations('home', ['incrementhome'])
    const actions2 = mapActions({
      incre2: 'home/incrementAction'
    })
    const action3 = mapActions('home', ['incrementAction'])
    const store = useStore()
    // eslint-disable-next-line no-undef
    const getters1 = computed(() => store.getters['home/homedubleCount'])
    const state1 = computed(() => store.state.home.homeCount)
    return {
      ...mutations,
      ...mutations1,
      ...actions2,
      ...action3,
      getters1,
      state1
    }
  }
}
</script>
<style scoped>
</style>
